使用Vue Component

Component 在管理方面變得好方便！現在可以把一個頁面切成一個一個的 Component ，這樣有什麼好處呢？把畫面拆解下來成為一個一個的元件之後很容易去維護。

簡單的介紹 Component

一個網頁像是一間房間，網頁上面的內容像是家具，那 Component 呢就是那一個一個的家具（電視、電腦、床，門...），如果今天我的房間想要把客廳的壁畫換掉的話，是不是只要把壁畫拿下來換新的上去就好拉！ Component 也是這樣如果網頁上想要換某一個區塊就只要拿掉換成新的就好了！那我們來看看是怎麼做出一個 Component 。

<script>
    //新建一個 component 並且可以自己定義 tag 的名稱
    Vue.components('new-tag',{
        template: `
            <ul>
                <li>新的壁畫<li>
                <li>新的壁畫</li>
            </ul>
        `
    });
    var myApp = new Vue({
        //略過
    })
</script>

在 id = "myApp" 裡面加入新的標籤

//這個 tag 的名稱是上面有定義過的要注意
<new-tag></new-tag>

試試看有沒有成功